<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Message 消息提示</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ElementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <el-button :plain="true" @click="open1">消息</el-button>
        <el-button :plain="true" @click="open2">成功</el-button>
        <el-button :plain="true" @click="open3">警告</el-button>
        <el-button :plain="true" @click="open4">错误</el-button>

        <script>
            new Vue({
                el:"#app",
                methods:{
                    open1(){
                        this.$message("这是一条消息提示");
                    },
                    open2(){
                        this.$message({
                            message:"恭喜你,这是一条成功消息",
                            type:"success"
                        });
                    },
                    open3(){
                        this.$message({
                            message:"警告哦,这是一条警告消息",
                            type:"warning"
                        });
                    },
                    open4(){
                        this.$message.error("错了哦,这是一条错误消息");
                    },
                }
            });
        </script>
    </div>


</body>
</html>